<template>
<!--hotmall/packageB/addaddress/addaddress.wxml-->
<form action>
  <view class="items">
    <text>姓名：</text>
    <input name="name" placeholder="请输入姓名" @input="formName" :value="name"></input>
  </view>
  <view class="items">
    <text>手机号：</text>
    <input name="phone" placeholder="请输入手机号" @input="formPhone" :value="phone" type="number" maxlength="11"></input>
  </view>
 <view class="items">
  <picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
    <view class="picker">
      选择地区：{{multiArray[0][multiIndex[0]]}}   {{multiArray[1][multiIndex[1]]}}      {{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
  <!-- <view class="items">
    <text>省份：</text>
    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <view class="picker">
        {{array[index]}}
      </view>
    </picker>
  </view>
  <view class="items">
    <text>城市：</text>
    <picker bindchange="bindPickerChangeOne" value="{{indexone}}" range="{{arrayone}}">
      <view class="picker">
        <input value='{{arrayone[indexone]}}' disabled='true'></input>
      </view>
    </picker>
  </view>
  <view class="items">
    <text>县区：</text>
    <picker bindchange="bindPickerChangeTwo" value="{{indextwo}}" range="{{arraytwo}}">
      <view class="picker">
        <input value='{{arraytwo[indextwo]}}' bindinput='getvalue' disabled='true'>{{arraytwo[indextwo]}}</input>
      </view>
    </picker>
  </view> -->
  <view class="items">
    <text>详细地址：</text>
    <input name="dizhi" placeholder="请输入详细地址，如楼道、楼盘号等" @input="formDizhi" :value="dizhi"></input>
  </view>
  <radio-group @change="checkFun">
    <checkbox color="#8DE152" @change="checkFun" value="1"></checkbox>设置为默认地址
  </radio-group>
  <button @tap="submit">保存</button>
</form>
</template>

<script>
import api from "../../../api";
var app = getApp();

export default {
  data() {
    return {
      regionid: 1,
      //查询省ID
      region_id: 0,
      //查询市ID
      regionId: 0,
      //查询区ID
      multiArray: [],
      //省市区名称
      multiIndex: [[0], [0], [0]],
      provinceId: [],
      //省级ID列表
      provinceName: [],
      //省级名称列表
      cityId: [],
      //市级ID列表
      cityName: [],
      //市级名称列表
      countyId: [],
      //区县ID列表
      countyName: [],
      //区县名称列表
      provinceOne: 0,
      //新增省ID
      cityOne: 0,
      //新增市ID
      countyOne: 0 //新增县ID
      ,
      uid: "",
      name: "",
      phone: "",
      dizhi: "",
      check: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getStorage({
      key: 'userId',
      success: id => {
        this.setData({
          uid: id.data
        });
      }
    });
    this.getaddress();
    console.log('省市区', this.multiArray);
  },

  onShow() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },
  methods: {
    bindMultiPickerChange: function (e) {
      console.info('picker发送选择改变，携带值为', e.detail.value);
      let i = e.detail.value;
      var pID = this.provinceId[i[0]],
          cID = this.cityId[i[1]],
          coID = this.countyId[i[2]];

      if (coID == undefined) {
        coID = cID;
      }

      console.log(pID, cID, coID);
      this.setData({
        provinceOne: pID,
        cityOne: cID,
        countyOne: coID,
        multiIndex: e.detail.value
      });
    },
    bindMultiPickerColumnChange: function (e) {
      console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var c = e.detail.column,
          v = e.detail.value,
          pId = this.provinceId[v],
          cId = this.cityId[v];

      if (c == 0) {
        console.info(pId);
        this.setData({
          region_id: pId
        });
        this.getCity();
      } else if (c == 1) {
        console.log(cId);
        this.setData({
          regionId: cId
        });
        this.getCounty();
      }
    },

    //获取省
    getaddress() {
      app.globalData.request({
        url: api.default.get_region,
        data: {
          parent_id: this.regionid
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: res => {
          console.info(res);
          var name = [],
              id = [];

          for (var i = 0; i < res.length; i++) {
            name[i] = res[i].region_name;
            id[i] = res[i].region_id;
          }

          console.info(id[0]);
          var one = 0;

          if (this.region_id == 0) {
            one = id[0];
            this.setData({
              region_id: one
            });
          }

          this.setData({
            provinceName: name,
            provinceId: id
          });
          this.getCity();
        }
      });
    },

    //获取市
    getCity() {
      app.globalData.request({
        url: api.default.get_region,
        data: {
          parent_id: this.region_id
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: city => {
          console.info(city);
          var id = [],
              name = [];

          for (var i = 0; i < city.length; i++) {
            id[i] = city[i].region_id;
            name[i] = city[i].region_name;
          }

          let two = 0;

          if (this.regionId == 0) {
            two = id[0];
            this.setData({
              regionId: two
            });
          }

          console.info('获取到的市id是', id[0]);
          this.setData({
            regionId: id[0],
            cityId: id,
            cityName: name
          });
          this.getCounty();
        }
      });
    },

    //获取区
    getCounty() {
      console.info('传入接口的城市ID', this.regionId);
      app.globalData.request({
        url: api.default.get_region,
        data: {
          parent_id: this.regionId
        },
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: county => {
          console.info(county);
          var id = [],
              name = [];

          for (var i = 0; i < county.length; i++) {
            id[i] = county[i].region_id;
            name[i] = county[i].region_name;
          }

          this.setData({
            countyId: id,
            countyName: name
          });
          var all = [];
          all.push(this.provinceName, this.cityName, this.countyName);
          this.setData({
            multiArray: all
          });
          console.info(this.multiArray);
        }
      });
    },

    //获取姓名
    formName(e) {
      this.setData({
        name: e.detail.value
      }); // console.log(this.data.name)
    },

    //获取电话
    formPhone(e) {
      this.setData({
        phone: e.detail.value
      }); // console.log(this.data.phone)
    },

    //获取详细地址
    formDizhi(e) {
      this.setData({
        dizhi: e.detail.value
      }); // console.log(this.data.dizhi)
    },

    checkFun: function (e) {
      // console.log(e)
      if (e.detail.value == '') {
        this.setData({
          check: 0
        });
      } else {
        this.setData({
          check: 1
        });
      }
    },

    submit() {
      console.log('别戳我');
      var pID = this.provinceOne,
          cID = this.cityOne,
          coID = this.countyOne;

      if (pID == 0 && cID == 0 && coID == 0) {
        pID = 2;
        cID = 52;
        coID = 500;
      }

      if (coID == undefined) {
        coID = cID;
      }

      console.log(pID, cID, coID);
      var aa = /^[1]([3-9])[0-9]{9}$/;

      if (this.uid == 0) {
        wx.showToast({
          title: '用户id不能为空'
        });
      } else if (this.name == undefined || this.name == '') {
        wx.showToast({
          title: '请输入姓名'
        });
      } else if (this.phone == undefined || this.phone == '') {
        wx.showToast({
          title: '请输入手机号'
        });
      } else if (!aa.test(this.phone)) {
        wx.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
      } else if (this.dizhi == '' || this.dizhi == undefined || this.dizhi == null) {
        wx.showToast({
          title: '请输入详细地址'
        });
      } else {
        app.globalData.request({
          url: api.default.addaddress,
          data: {
            uid: this.uid,
            name: this.name,
            phone: this.phone,
            province: pID,
            city: cID,
            area: coID,
            addr: this.dizhi,
            is_default: this.check
          },
          method: 'POST',
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            // console.log(res)
            wx.showToast({
              title: res.msg
            });

            if (this.isop == 1) {
              wx.hideLoading();
            }

            wx.navigateBack({
              detail: 1
            });
          }
        });
      }
    }

  }
};
</script>
<style>
@import "./newAddAddress.css";
</style>